<template>
	<div id="basicInformation">
		<el-row>
			<el-col :span="4" class="backgroundTitelBox">
				{{ $t('agent.financial_info') }}
			</el-col>
			<el-col :span="2" class="refrestBox">
				<el-button
					type="primary"
					icon="el-icon-refresh"
					@click="refresh"
				>
					{{ $t('common.refresh') }}
				</el-button>
			</el-col>
		</el-row>
		<div class="titelBox">
			{{ $t('agent.wallet_balance') }}
		</div>
		<el-row class="msgList">
			<el-col :span="6">
				现金余额：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ formatAmountStr(totalBalance.balance) }}
				</span>
			</el-col>
			<template v-if="businessModel != 1">
				<el-col :span="6">
					可用额度：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.creditAvailable) }}
					</span>
				</el-col>
				<el-col :span="6">
					应还借款:
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.borrowAmount) }}
					</span>
				</el-col>
				<el-col :span="6">
					外放额度:
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.dispatchAmount) }}
					</span>
				</el-col>
				<el-col :span="6">
					授信总额:
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.teamCreditTotal) }}
					</span>
				</el-col>
				<el-col :span="6">
					信用额度：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.creditBalance) }}
					</span>
				</el-col>
				<el-col :span="6">
					应收账款：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.shouldRepayment) }}
					</span>
				</el-col>
			</template>
			<template v-if="businessModel == 1">
				<el-col :span="6">
					冻结金额(现金钱包):
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.frozen) }}
					</span>
				</el-col>
				<el-col :span="6">
					收益余额:
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.profit) }}
					</span>
				</el-col>
				<el-col :span="6">
					冻结金额(收益钱包):
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ formatAmountStr(totalBalance.profitFrozen) }}
					</span>
				</el-col>
			</template>
		</el-row>
		<el-divider></el-divider>
		<!-- <div class="titelBox">
			佣金信息
		</div>
		<el-row class="msgList">
			<el-col :span="6" v-if="parentData.commissionModel === 1">
				累计个人返点：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							financialInforData.rebate
						)
					}}
				</span>
			</el-col>
			<el-col :span="6" v-if="parentData.commissionModel === 2">
				累计团队返佣：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							financialInforData.teamRebate
						)
					}}
				</span>
			</el-col>
		</el-row>
		<el-divider></el-divider> -->
		<template  v-if="businessModel == 1">
			<div class="titelBox">
			收益钱包转现金钱包
			</div>
			<el-row class="msgList">
				<el-col :span="6">
					总金额：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{
							handleNumberAgent(
								parentData.currency,
								totalBalance.profitTransferSum
							)
						}}
					</span>
				</el-col>
				<el-col :span="6">
					总次数:
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{
							totalBalance.profitTransferCount || 0
						}}
					</span>
				</el-col>
			</el-row>	
		</template>

		<template v-if="businessModel != 1">
			<div class="titelBox">
				现金钱包转信用钱包
			</div>
			<el-row class="msgList">
				<el-col :span="6">
					总金额：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{
							handleNumberAgent(
								parentData.currency,
								financialInforData.cashToCredit
							)
						}}
					</span>
				</el-col>
				<el-col :span="6">
					总次数：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ financialInforData.cashToCreditTimes || '0' }}
					</span>
				</el-col>
			</el-row>
			<el-divider></el-divider>
			<div class="titelBox">
				信用钱包转现金钱包
			</div>
			<el-row class="msgList">
				<el-col :span="6">
					总金额：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{
							handleNumberAgent(
								parentData.currency,
								financialInforData.creditToCash
							)
						}}
					</span>
				</el-col>
				<el-col :span="6">
					总次数：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ financialInforData.creditToCashTimes || '0' }}
					</span>
				</el-col>
			</el-row>
			<el-divider></el-divider>
		</template>
		<div class="titelBox">
			充提信息
			<p
				style="font-size: 13px;"
				v-if="withdrawLimitInfoRespDTO.withdrawLimitType === 2"
			>
				取款限制：
				<span>
					流水限制
				</span>
				（该代理所有直属代理和直属会员均按该类型来限制取款）
			</p>
		</div>
		<el-row
			v-if="withdrawLimitInfoRespDTO.withdrawLimitType === 2"
			class="msgList"
		>
			
			<el-col :span="6">
				存款总额：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							depositWithdrawSummaryDTO.depositTotal
						)
					}}
				</span>
			</el-col>
			<el-col :span="6">
				存款次数：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ depositWithdrawSummaryDTO.depositTimes || '0' }}
				</span>
			</el-col>
			<el-col :span="6">
				总取款金额：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							depositWithdrawSummaryDTO.withdrawTotal
						) || '0'
					}}
				</span>
			</el-col>
			<el-col :span="6">
				总取款次数：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ depositWithdrawSummaryDTO.withdrawTimes || '0' }}
				</span>
			</el-col>

			<!-- 现金线字段 -->
			<template v-if="businessModel == 1">
				<el-col :span="6">
					现金钱包取款金额：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{
							handleNumberAgent(
								parentData.currency,
								depositWithdrawSummaryDTO.withdrawCashTotal
							) || '0'
						}}
					
					</span>
				</el-col>
				<el-col :span="6">
					现金钱包取款次数：
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ depositWithdrawSummaryDTO.withdrawCashTimes || '0' }}
					</span>
				</el-col>
				<el-col :span="6">
					收益钱包取款金额:
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{
							handleNumberAgent(
								parentData.currency,
								depositWithdrawSummaryDTO.withdrawProfitTotal
							) || '0'
						}}
					</span>
				</el-col>
				<el-col :span="6">
					收益钱包取款次数:
					<i v-if="activeL" class="el-icon-loading"></i>
					<span v-else>
						{{ depositWithdrawSummaryDTO.withdrawProfitTimes || '0' }}
					</span>
				</el-col>
			</template>
		</el-row>
		<el-row v-else class="msgList">
			<el-col :span="6">
				取款限制类型：
				<span>
					账单限制
				</span>
			</el-col>
			<el-col :span="8">
				剩余可提现金额：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							withdrawLimitInfoRespDTO.withdrawRemainAmount
						) || '0'
					}}
				</span>
			</el-col>
		</el-row>

		
		<el-divider></el-divider>
		<template v-if="businessModel !== 1">
			<div class="titelBox">
				上下分信息
				<span>
					标注说明：
					<b class="red">上分</b>
					,
					<b class="green">下分</b>
				</span>
			</div>
			<el-row class="msgList">
				<table class="msg-table">
					<tbody>
						<tr class="th">
							<td colspan="2">给充值</td>
							<td colspan="2">被充值</td>
						</tr>
						<tr>
							<td>
								<div>
									给会员充值
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.activeDepositToMember
										)
									}}
								</div>
								<div>
									充值
									<span class="red">上分</span>
									次数：{{
										formatNumStr(
											financialInforData.activeDepositToMemberTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									给代理充值
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.activeDepositToProxy
										)
									}}
								</div>
								<div>
									充值
									<span class="red">上分</span>
									次数：{{
										formatNumStr(
											financialInforData.activeDepositToProxyTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									被代理充值
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveDepositByProxy
										)
									}}
								</div>
								<div>
									充值
									<span class="red">上分</span>
									次数：{{
										formatNumStr(
											financialInforData.passiveDepositByProxyTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									被官方充值
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveDepositByPlatform
										)
									}}
								</div>
								<div>
									充值
									<span class="red">上分</span>
									次数：{{
										formatNumStr(
											financialInforData.passiveDepositByPlatformTimes
										)
									}}
								</div>
							</td>
						</tr>
						<tr class="th">
							<td colspan="2">给提现</td>
							<td colspan="2">被提现</td>
						</tr>
						<tr>
							<td>
								<div>
									给会员提现
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.activeWithdrawToMember
										)
									}}
								</div>
								<div>
									提现
									<span class="green">下分</span>
									次数：{{
										formatNumStr(
											financialInforData.activeWithdrawToMemberTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									给代理提现
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.activeWithdrawToProxy
										)
									}}
								</div>
								<div>
									提现
									<span class="green">下分</span>
									次数：{{
										formatNumStr(
											financialInforData.activeWithdrawToProxyTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									被代理充值
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveWithdrawByProxy
										)
									}}
								</div>
								<div>
									提现
									<span class="red">上分</span>
									次数：{{
										formatNumStr(
											financialInforData.passiveWithdrawByProxyTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									被官方提现
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveWithdrawByPlatform
										)
									}}
								</div>
								<div>
									提现
									<span class="green">下分</span>
									次数：{{
										formatNumStr(
											financialInforData.passiveWithdrawByPlatformTimes
										)
									}}
								</div>
							</td>
						</tr>
						<tr class="th">
							<td colspan="2">给授权</td>
							<td colspan="2">被授权</td>
						</tr>
						<tr>
							<td>
								<div>
									给会员授信
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.activeCreditDepositToMember
										)
									}}
								</div>
								<div>
									授信
									<span class="red">上分</span>
									次数：{{
										formatNumStr(
											financialInforData.activeCreditDepositToMemberTimes
										)
									}}
								</div>
								<br />
								<div>
									给会员授信
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.activeCreditWithdrawToMember
										)
									}}
								</div>
								<div>
									授信
									<span class="green">下分</span>
									次数：{{
										formatNumStr(
											financialInforData.activeCreditWithdrawToMemberTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									给代理授信
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.activeCreditDepositToProxy
										)
									}}
								</div>
								<div>
									授信
									<span class="red">上分</span>
									次数：{{
										formatNumStr(
											financialInforData.activeCreditDepositToProxyTimes
										)
									}}
								</div>
								<br />
								<div>
									给代理授信
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.activeCreditWithdrawToProxy
										)
									}}
								</div>
								<div>
									授信
									<span class="green">下分</span>
									次数：
									{{
										formatNumStr(
											financialInforData.activeCreditWithdrawToProxyTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									被代理授信
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveCreditDepositByProxy
										)
									}}
								</div>
								<div>
									授信
									<span class="red">上分</span>
									次数：
									{{
										formatNumStr(
											financialInforData.passiveCreditDepositByProxyTimes
										)
									}}
								</div>
								<br />
								<div>
									被代理授信
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveCreditWithdrawByProxy
										)
									}}
								</div>
								<div>
									授信
									<span class="green">下分</span>
									次数：{{
										formatNumStr(
											financialInforData.passiveCreditWithdrawByProxyTimes
										)
									}}
								</div>
							</td>
							<td>
								<div>
									被官方授信
									<span class="red">上分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveCreditDepositByPlatform
										)
									}}
								</div>
								<div>
									授信
									<span class="red">上分</span>
									次数：
									{{
										formatNumStr(
											financialInforData.passiveCreditDepositByPlatformTimes
										)
									}}
								</div>
								<br />
								<div>
									被官方授信
									<span class="green">下分</span>
									：{{
										formatAmountStr(
											financialInforData.passiveCreditWithdrawByPlatform
										)
									}}
								</div>
								<div>
									授信
									<span class="green">下分</span>
									次数：
									{{
										formatNumStr(
											financialInforData.passiveCreditWithdrawByPlatformTimes
										)
									}}
								</div>
							</td>
						</tr>
						<tr class="th">
							<td>会员</td>
							<td>代理</td>
							<td>代理</td>
							<td>官方</td>
						</tr>
					</tbody>
				</table>
			</el-row>
		</template>
	</div>
</template>

<script>
import list from '@/mixins/list'
// import dayjs from 'dayjs'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		agentData: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			//
			businessModel: 0,
			activeL: false,
			financialInforData: {}, // 财务信息
			depositWithdrawSummaryDTO: {},
			totalBalance: {},
			withdrawLimitInfoRespDTO: {},
			page: 1,
			size: 10
		}
	},
	computed: {},
	watch: {
		parentData: {
			handler() {
				this.refresh()
			},
			deep: true
		},
		financialInforList: {
			handler(newV) {
				this.financialInforData = newV
			},
			deep: true
		}
	},
	created() {
		this.refresh()
	},
	mounted() {},
	methods: {
		async refresh() {
			const merchantId = this.parentData.merchantId
			const userId = this.parentData.id
			const params = { userId, merchantId }
			if (this.activeL) return
			this.activeL = true
			try {
				this.queryBalance(params)
				const res = await this.$api.getProxyDetailFinanceInfo(params)
				if (res?.code === 200) {
					this.businessModel = res?.data?.businessModel || 0
					this.withdrawLimitInfoRespDTO =
						res?.data?.withdrawLimitInfoRespDTO || {}
					this.financialInforData = res?.data?.proxyAccumulateVO || {}
					this.depositWithdrawSummaryDTO =
						res?.data?.depositWithdrawSummaryDTO || {}
					this.activeL = false
				}
			} catch (err) {
				throw err
			} finally {
				this.activeL = false
			}
		},
		queryBalance(params) {
			return this.$api.getProxyDataBalance(params).then((ret) => {
				if (ret.code === 200) {
					this.totalBalance = ret.data || {}
				}
			})
		},
		handleNumberAgent(sign, num) {
			return this.handleNumber(sign, num || 0)
		},
		formatAmountStr(amount, sign = this.parentData.currencySymbol) {
			const num = this.handleNumber(sign, amount || 0)
			return `${num || '-'}`
		},
		formatNumStr(num) {
			if (num === null || num === undefined) {
				return '0'
			}
			return num.toString()
		}
	}
}
</script>

<style lang="scss" scoped>
#basicInformation {
	font-size: 14px;
	line-height: 40px;
	padding-top: 10px;
	padding-bottom: 40px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.titelBox {
	font-size: 16px;
	font-weight: bold;
	position: relative;

	span {
		font-size: 13px;
		font-weight: 400;
		padding-left: 10px;
	}
}
.backgroundTitelBox {
	width: 188px;
	height: 40px;
	text-align: center;
	background: #000;
	color: rgb(255, 255, 255);
}
.cell .el-button {
	min-width: 60px;
	height: 24px;
	line-height: 24px;
}
.refrestBox {
	text-align: center;
	margin: 0 10px;
}
.msgList {
	line-height: 24px;
	margin-bottom: 10px;
}
.textR {
	text-align: right;
}
.paddingL {
	padding-left: 30px;
}
.width70 {
	display: inline-block;
	box-sizing: border-box;
	min-width: 68%;
}
.width30 {
	display: inline-block;
	min-width: 30%;
}
.decoration {
	text-decoration: underline;
	cursor: pointer;
}

.msg-table {
	border-collapse: collapse;
	td {
		border: 1px solid #ebeef5;
		padding: 15px;
	}
	.th {
		text-align: center;
		font-weight: 600;
		td {
			padding: 10px;
		}
	}
}
.red {
	color: red;
	font-weight: 400;
}
.green {
	color: green;
	font-weight: 400;
}
</style>
